   <template>
	<view class="container">
		<view class=" display-flex display-flex-column display-flex-align-center">
			<view class="layer-stop">
				<view class="stop-name">{{lineInfo.startStopName}}</view>
				<image class="to-right" src="../../static/images/bus/to-right.png"></image>
				<view class="stop-name">{{lineInfo.endStopName}}</view>
				<view style="flex-grow:1"></view>
				<!-- <view hoverClass="press">
					<image @click="exchange" class="to-change" src="../../static/images/bus/btn_change_site.png" ></image>
				</view> -->
				<view @click="exchange" class="display-flex display-flex-align-center" style="color: #000;font-weight: 800;">
					<view class="iconfont icon-huanxiangxiaochengxu32" style="margin-right: 3px;"></view>
					<view class="">
						换向
					</view>
				</view>
			</view>
			<view class="layer-time-price"  
			    v-if="lineInfo.firstTime&&lineInfo.lastTime">
				<text class="ico-first">首</text>
				<text class="header-time" style="margin-left:4rpx">{{lineInfo.firstTime?lineInfo.firstTime:'--:--'}}</text>
				<text class="ico-first" style="margin-left:4rpx">末</text>
				<text class="header-time" style="margin-left:4rpx">{{lineInfo.lastTime?lineInfo.lastTime:'--:--'}}</text>
				<block v-if="lineInfo.price&&lineInfo.price!='0.0'">
					<text class="ico-first" style="margin-left:4rpx">票价</text>
					<text class="header-time" style="margin-left:4rpx">{{lineInfo.price}}</text>
				</block>
				<!-- <view bind:tap="showBusTime" class="bus-time"
				:style="'opacity:'+showFadeAnim?opacity:'1'"  v-if="(showFadeAnim||expandLevel>0)&&busTimeList.length==0">
					<view class="bus-time-bg"></view>
					<view class="bus-time-v">
						<image class="bus-time-img" src="../../static/images/bus/ico-biaoge.png"></image>
						<view class="bus-time-tx">发车预测</view>
					</view>
				</view> -->
			</view> 
			
			<view bind:tap="goToStationDetail" class="bus" >
			
				<view class="bus-eta" v-if="livebus&&livebus.status==0">
					
			
					<block v-if="!livebus.buses.length">
						<view class="tpl-loading0"></view>
						<view class="tpl-loading1"></view>
					</block>
					<block v-if="livebus.buses.length">
						 <view class="" v-if="oneBus">
							<view class="bus-one" v-if="oneBus.text!='已到站'">
								<view :class="oneBus.text=='即将到站'?'txorcolor':''" class="display-flex display-flex-align-end">
									<view  class="tx-trave">{{oneBus.travelTime.value}}</view>
									<view style="height: 30px;" class="display-flex display-flex-column display-flex-justify-space-between">
										<image  style="width: 8px;height: 8px;" :src="oneBus.text=='即将到站'?'../../static/images/bus/ico-wifi-or.gif':'../../static/images/bus/ico-wifi-blue.gif'"></image>
										<view >{{oneBus.travelTime.unit}}</view>
									</view>
								</view>
								<view v-if="oneBus.busDesc" style="background-color: #f7f4f4;padding: 2px; color: #6b6b6b; font-size: 11px;border: 1px solid #909090;">
									<view class="">
										{{oneBus.busDesc}}
									</view>
								</view>
								<view v-else :class="oneBus.text=='即将到站'?'txorcolor':''" class="display-flex display-flex-align-center">
									<view class="tx-dinnum">{{oneBus.text}}</view>
									<view  :class="oneBus.text=='即将到站'?'tx-sem-or':'tx-sem2'"></view>
									<view class="tx-dinnum">{{oneBus.distance.value}}{{oneBus.distance.unit}}</view>
								</view>
								
							</view>
							
							<view v-else class="tx-ydz">
								已到站
							</view>
						 </view>
						 <view  class="" style="margin-left:128rpx" v-if="twoBus">
							<view class="bus-one" v-if="twoBus.text!='已到站'">
								<view :class="twoBus.text=='即将到站'?'txorcolor':''" class="display-flex display-flex-align-end">
									<view  class="tx-trave">{{twoBus.travelTime.value}}</view>
									<view style="height: 30px;" class="display-flex display-flex-column display-flex-justify-space-between">
										<image  style="width: 8px;height: 8px;" :src="twoBus.text=='即将到站'?'../../static/images/bus/ico-wifi-or.gif':'../../static/images/bus/ico-wifi-blue.gif'"></image>
										<view >{{twoBus.travelTime.unit}}</view>
									</view>
								</view>
								<view v-if="twoBus.busDesc" style="background-color: #f7f4f4;padding: 2px; color: #6b6b6b; font-size: 11px;border: 1px solid #909090;">
									<view class="">
										{{twoBus.busDesc}}
									</view>
								</view>
								<view v-else  :class="twoBus.text=='即将到站'?'txorcolor':''" class="display-flex display-flex-align-center">
									<view class="tx-dinnum">{{twoBus.text}}</view>
									<view  :class="twoBus.text=='即将到站'?'tx-sem-or':'tx-sem2'"></view>
									<view class="tx-dinnum">{{twoBus.distance.value}}{{twoBus.distance.unit}}</view>
								</view>
							</view>
							
							<view v-else class="tx-ydz">
								已到站
							</view>
						 </view>
					</block>
						
				</view>
				<view class="bus-eta" v-else>
					<view class="near-bus-state-noeta" v-if="lineInfo.firstTime&&lineInfo.lastTime">首{{lineInfo.firstTime}} 末{{lineInfo.lastTime}}</view>
					<view class="near-bus-noeta" :style="lineInfo.firstTime&&lineInfo.lastTime?'margin-left:30rpx;':''">{{livebus.notice}}</view>
				</view>
			</view>
			
			
		</view>
		<view class="line-track" >
			<scroll-view enable-flex class="scroll_view" :scroll-left="scrollLeft" :scroll-with-animation="true" :scroll-x="true" :show-scrollbar="false">
		
				
				<!-- 站点列表 -->
				<view class="line_wrapper" >
					<view v-for="(item, index) in stationList" :key="index" class="line_s" :id="'stop_' + item.stationId">		                   
					    <!-- 车辆位置 -->
					     <block >
				
							<view v-if="(itemCar[0].order -1) == index" v-for="(itemCar, indexCar) in lineBusList" class="bus-block" :key="indexCar" >
								<view v-if="itemCar[0].distanceToSc <= 60 || itemCar[0].order==1" class="bus_icon" style="position:relative;top:-10px;margin-left: -25rpx;">
									
									<image class="icon-bus" mode="aspectFit" src="../../static/images/bus/realtimebus_bus_icon.png" style="position:absolute;top:0rpx;left:0rpx;"></image>
									<text class="bus-item-num" v-if="itemCar.length > 1">{{itemCar.length}}</text>
									
								</view>
								<view v-else class="bus_icon" style="position:relative;top:-10px;margin-left: -90rpx;">
									
									<image class="icon-bus" mode="aspectFit" src="../../static/images/bus/realtimebus_bus_icon.png" style="position:absolute;top:0rpx;left:0rpx;"></image>
									<text class="bus-item-num" v-if="itemCar.length > 1">{{itemCar.length}}</text>
									
								</view>
							</view>
						</block>
						<!-- 车辆位置 -->
						<!-- 线路线段 -->
						<view class="bar">
							<view :class="'bar_line ' + (index===0?'start_s ':index===stationList.length-1?'end ':'')"  :style="'background-color:'+(item.traffic?trafficColor[item.traffic-1]:trafficColor[0])">
								<image class="bar_arrow" src="../../static/images/bus/icon_line_arrow.png"></image>
							</view>
							<image class="line_stop_pos station-icon" src="../../static/images/bus/icon-station.png" v-if="selectStationIndex != index"></image>
							 <block v-if="selectStationIndex == index">
								 <image class="line_stop_pos station-icon selected" src="../../static/images/bus/map-station-current.png" ></image>
							 </block>	
							<view class="station">
								<view @click="changeStation(index)" :class="'station_name ' + (selectStationIndex == index?'active':'')" :data-index="index" :data-item="item" style="position:relative;z-index:90;">
									<text style="font-size: 12px;">{{index+1}}</text><view >{{item.stationName|formatStopName}}</view>
									<!-- <image class="icon" src="../../static/images/bus/subway.png" v-if="item.subway"></image> -->
									<image @click.stop="goHere(item)" class="icon"  src="../../static/images/bus/daohang.png" v-if="selectStationIndex == index"></image>
									
								</view>
								<view class="display-flex display-flex-column">
									<view class="nearest-text"  v-if="nearestStation&&nearestStation.stationId===item.stationId" style="border: 1px solid #00aa00;" > 离我最近 </view>
									 <view class="display-flex display-flex-column">
									 	<view v-if="item.subwayList&&item.subwayList.length" v-for="(itemMe,indexMe) in item.subwayList" :key="indexMe" class="metro-text"   :style="'background-color:rgba('+itemMe.color+',1)'" >  {{itemMe.lineName}} </view>
									 </view>
								</view>
							   <view @click="setScrollLeft(index)" class="hover_station left" v-if="selectStationIndex == index&&leftShow">
									<view class="iconfont icon-jiantou_xiangzuoliangci"></view>
									<view class="name ">{{item.stationName|formatStopName}}</view>
								</view>
								<view @click="setScrollLeft(index)" class="hover_station right" v-if="selectStationIndex == index&&rightShow">
									<view class="iconfont icon-jiantou_xiangyouliangci"></view>
									<view class="name">{{item.stationName|formatStopName}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>  
		
		</view>
					
	
	
	    <view class="footer-box shadow">
	    	<view class="footer-btn-list" @click.stop="gofeedback" >
	    		<view class="iconfont icon-jianyi32 icontubiao"></view>
	    		<view class="icontextfont">反馈</view>
	    	</view>
			<view class="footer-btn-list" @click.stop="goSameStation" >
				<view class="iconfont icon-zhuanxianxianlu icontubiao"></view>
				<view class="icontextfont">同站线路</view>
			</view>
	    	<view class="footer-btn-list" @click.stop="goMap">
	    		<view class="" >
	    			<view class="iconfont icon-ditu icontubiao "></view>
	    			<view class="icontextfont">地图</view>
	    		</view>
				<!-- <view class="ditu">
					
				</view> -->
	    	</view>
	    	<view class="footer-btn-list" @click.stop="refreshHandel">
	    		<view :animation="animationData" class="iconfont icon-shuaxin icontubiao"></view>
	    		<view class="icontextfont">刷新</view>
	    	</view>
	    	<view class="footer-btn-list" @click.stop="ca">
	    		<view   @click="collect"  v-if="!isCollect" class="iconfont icon-shoucang icontubiao"></view>
	    		<view  @click="cancelCollect"  v-else-if="isCollect" class="iconfont icon-shoucang1 icontubiao"></view>
	    		<view class="icontextfont">{{isCollect?'已收藏':'收藏'}}</view>
	    	</view>
	    </view>
	 
	    <view style="height: 400px;margin: 20px 15px;" @click="goMap">
	    	<view class="map-contarin" >
	    		<map id="pathDetailMap" ref="pathDetailMap" class="map-content" @tap="goMap"   :circles="circles"  :controls="controls" :includePoints="includePoints" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" :scale="scale" :showLocation="showLocation" @markertap="markerTap"  >
	    		</map>
	    	</view>
	    </view>
		
		<!-- #ifdef MP-ALIPAY -->
		<goBus></goBus>
		
		<!-- #endif -->
	</view>
</template>

<script>
	 import goBus from '@/components/go_bus/index.vue'
	 import draw from '@/components/draw/index.vue'
	 import b_util from "@/common/js/busutil.js"
	 import { mapState } from 'vuex';
	 import { wgs84togcj02 } from "@/common/js/mapUtil.js"
	 import {toLogin} from '@/libs/login.js';
	 import {mapGetters} from "vuex";
	 import { isCollectLine, collectLine } from "@/api/bus.js"
	 import Cache from '../../utils/cache';
	 import { CITY_INFO, COLLECT_MODEL} from '../../config/cache.js'
	 import Routine from '@/libs/routine';
	 import {
	 	getLineAndStopDetailsApi, getRoutesAndStop, getRealBusApi, addBrowsedLine
	 } from '@/api/real_bus.js';
	 import {
	 	getBusAd
	 } from '@/api/api.js';
	export default {
		components: {
			draw,goBus

		 },
		
		 computed: mapGetters(['isLogin',]),
		 filters: {
		 	isAllChinese(s) {
		 		if (!s) {
					return (false)
				};
				var reg = getRegExp('^([\x5cu4E00-\x5cu9FA5]|(-)|(\x5c()|(\x5c)))+$', 'g');
				return (reg.test(s))
		 	},
		 	formatStopName(value) {
		 	  return value.replace('-', ' - ').replace( new RegExp('(\x5c(|（)', 'g'), '︵').replace( new RegExp('(\x5c)|）)', 'g'), '︶');
		 	}
		 },
		data() {
			return {
				navTabtop: 20,
				systemType:'',
				drawerLayers: [ 670, 1084 ],
				background: {
					background: '#fff'
				},
				isCollect:0,
			
				lineId: "",
				stationId: "",
				
				drawerHeight: 0,
				drawerMarginTop: 0,
				pixelRatio: 0,
				expandLevel: 1,
				isShowLineAnimation: 0,
				
			
				
				mapHeight: {
					type: String,
					value: ""
				},
				selectStationMarker:[],
				screenWidth:'',
				screenHeight:'',
				animationData:'',
				ExAnimationNum: 1,
				statusBarHeight:'',
				lineInfo: {},
				oppositeList: [],
				roads: [],
				stationList: [],
				opacity: 1,
				busTimeList: [],
				livebus: {},
				scrollLeft: 0,
				leftShow: 0,
				rightShow: 0,
				selectStation: {}, //选中的站点
				selectStationIndex: 0, //选中的站点索引
				observe: null,
				setInterName: '',
				oneBus: '',
				twoBus: '',
				lineBusList: [],
				nearestStation: '',
				routes: [],
				carList: [],
				carDataList: [],
				busMapList:[],
				trafficColor:[
					"#00ae77",
					"#ffaa53",
					"#ea605d",
					"#9a2d21"
				],
				adData: null,
				aliCode:'',
				firstShow: false,
				pathDetailMap:{},
				points:[],
				stationMarkers:[],
				carMarkers:[],
				showLocation: true,
				latitude: "26.600325",
				longitude: "106.705484",
				includePoints: [],
				markers: [],
				polyline: [],
				scale: 9,
				showMakerZoom: 15,
				controls: [],
				mapHeight: {
					type: String,
					value: ""
				},
				circles: [],
			}
		},
		watch: {
		  // selectStationIndex: {
		  //   handler: function (newV,oldV) {
		  //     if (newV) {
				//   console.log(newV)
				//    console.log(newV !== oldV)
				//   if(newV !== oldV){
				// 	this.setScrollLeft(newV);
				// 	this.watchStationName();
				// 	this.$set(this,'leftShow', 0)
				// 	this.$set(this,'rightShow', 0)
				//   }
		  //     }
		  //   },
		  //   immediate: true,
		  //   deep: true
		  // }
			
		},
		onLoad(t) {
			try {
				    
					var i =  uni.getSystemInfoSync(),
					a = Math.max(i.screenHeight, i.screenWidth), 
					o = Math.min(i.screenHeight, i.screenWidth);
					a = Math.max(a, i.windowHeight), 
					o = Math.max(o, i.windowWidth);
					//获取手机状态栏高度
					
					this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];			
					// #ifdef MP
				
					var r = i.windowWidth / 750, 
					 d = uni.getMenuButtonBoundingClientRect(),
					  u = d.bottom > 0 ? d.bottom : 128 / r;
					this.navTabtop = d.top;
					// #endif
					
					// #ifdef H5
					var r = i.windowWidth / 750,  u = 56;
					this.navTabtop = 43;
					// #endif
					
					// #ifdef APP-PLUS
					var r = i.windowWidth / 750 ;
					var u = this.statusBarHeight+44;
					this.navTabtop = 43;
					// #endif
			
					
				
					this.screenHeight = a, 
					this.screenWidth = o;
					
					this.drawerHeight = a - u
					this.drawerMarginTop = u
					this.pixelRatio = r
					this.drawerLayers.length == 2 && this.drawerLayers.push((a - u) / r), 

					
				  this.systemType =	i.system && i.system.indexOf("iOS") > -1 ? "IOS" : i.system && i.system.indexOf("Android") > -1 ? "ANDROID" : "OTHER";
				
			} catch (t) {
				console.error("getSystemInfo  fail", t);
			}
			//
			
			this.lineId = t.lineId
			this.stationId = t.stationId
			this.getLineInfo();
			
			
			var that = this 
			
			
			setTimeout(function(){
				console.log('that.isLogin',that.isLogin)
				if (that.isLogin) {
					 that.isCollectLine()
				}
				
				that.getBusAd()
			},500)
				this.getRoutes();
			
		},
		onShow() {
			if(this.firstShow){
				this.setRealtimeBus();
			} else {
				this.firstShow = true
			}
			
			// #ifdef MP-ALIPAY
			my.hideBackHome();
			// #endif
			// this.getLineInfo();
			
			// if(uni.getStorageSync('hasLogin')){
			//    this.isCollectLine()
			// }
			
						
			
		},
		beforeDestroy() {
			console.log('去除定时器3333')
			clearInterval(this.setInterName);
		},
		onUnload() {
			console.log('去除定时器1111')
		    clearInterval(this.setInterName);
		},
		onHide() {
			console.log('去除定时器2222')
		    clearInterval(this.setInterName);
		},
		onPullDownRefresh(){
			this.refreshHandel()
		},
		methods: {
			
			getLineInfo(){
				var that = this;
				var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
				getLineAndStopDetailsApi({
					lineId: that.lineId,
					cityId: city.id,
				}).then(res => {
					var data = res.data
					that.$set(that, "lineInfo" , data)
					uni.setNavigationBarTitle({
						title: that.lineInfo.lineName
						
					});

					that.$set(that, "oppositeList" ,data.oppositeList)
					that.$set(that, "stationList" , that.zhStations(data.stopList))
					
					that.getNearestStopFun()
					
						that.initMarker()
					setTimeout(function () {
					  that.watchStationName();
					  // // #ifdef MP-ALIPAY
					  // that.addBrLine()
					  // // #endif
					  
					}, 1000);
				})
				//  uni.request({
				// 	url: "http://open.chelaile.net.cn/baseservice/client/getLineAndStopDetails.action?sign=EpDYBeAlUz2hfg5WGx&cityId=989&lineId="+that.lineId,
				// 	method: 'GET',
				// 	timeout: 20000,
				// 	success: (res) => {
				// 		var data = res.data.data
				// 		// data = JSON.parse(data.replace("**YGKJ","").replace("YGKJ##",""))
						
				// 		that.$set(that, "lineInfo" , data)
				// 		that.$set(that, "oppositeList" ,data.oppositeList)
				// 		that.$set(that, "stationList" , that.zhStations(data.stopList))
				// 		that.getNearestStopFun()
				// 		that.initMarker()
						
						
				// 		setTimeout(function () {
				// 		  that.watchStationName();
				// 		}, 1000);
				// 	},
				// 	fail: (msg) => {
				// 		// reject('请求失败');
				// 	}
				// })
			},
            zhStations(stopList){
				stopList.forEach(function(item, i){
				   var lag = wgs84togcj02(item.slng, item.slat)
				   stopList[i].slng = lag[0]
				   stopList[i].slat = lag[1]
		
				})
				return stopList;
			},
					
			initStation(){
				
				var that = this
				if(that.stationId){
					that.stationList.forEach((el ,index) =>{
						if(el.stationId == that.stationId){
							that.selectStationIndex = index
							that.selectStation = that.stationList[index]
						}
					})
				} else {
					if(that.nearestStation){
						that.selectStationIndex = that.nearestStation.order -1
						that.selectStation = that.nearestStation
					} 
					
				}
				// 如果没有匹配到站点 那就选择最后站点
				if(!that.selectStation){
					that.selectStationIndex = that.stationList.length -1
					that.selectStation = that.stationList[that.selectStationIndex]
				}
				that.setRealtimeBus();
				that.setScrollLeft(that.selectStationIndex);
				
			},
			getRoutes(){
				var that = this;
				var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
				
				getRoutesAndStop({
					lineId: that.lineId,
					cityId: city.id
				}).then(res => {
					var data = res.data
					
					that.$set(that, "routes" , data.lineofRegression)
					that.initPolyLine()
				})
		
			},
			initPolyLine(){
				var that = this
				that.polyline = []
				that.points = []
				if(that.routes.length){
					if(that.roads.length){
						var pls = []
						var index = 0;
						var traffic = 0
						var color = that.trafficColor[0]
						that.routes.forEach(function(item){
							var lag = wgs84togcj02(item.lng, item.lat)
							
							var points = []
							var polyline  = []
							
							that.points.push({latitude: lag[1], longitude: lag[0]})
							
							
							if(item['stopOrder']){
								// 线段颜色发生变化
								index = item['stopOrder']
								points = []
								polyline  = []
								traffic = that.roads[item['stopOrder']-1][0]['TVL']
								color = that.trafficColor[traffic - 1]
								
							}
							
							points.push({latitude: lag[1], longitude: lag[0]})
							polyline = {//指定一系列坐标点，从数组第一项连线至最后一项
							            stopIndex: index,
										points: points,
										color: color,//线的颜色
										width:9,//线的宽度
										borderColor: color,
										dottedLine: false,
										borderWidth: true,
										arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
									}
							pls.push(polyline);
							
						})
						
						var rots = pls.reduce((acc, item) => {
						  if (!acc[item.stopIndex]) {
						    acc[item.stopIndex] = [];
						  }
						  
						  acc[item.stopIndex].push(item);
						  return acc;
						}, []);
						rots.forEach((res) => {
							var po = []
							
							res.forEach((el)=>{
								po.push(el.points[0])
							})
							var pl =  {//指定一系列坐标点，从数组第一项连线至最后一项
										points: po,
										color: res[0].color,//线的颜色
										width:9,//线的宽度
										borderColor: res[0].color,
										dottedLine: false,
										borderWidth: true,
										arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
									}
							that.polyline.push(pl)		
						})
					} else{
						that.routes.forEach(function(item){
							var lag = wgs84togcj02(item.lng, item.lat)
							that.points.push({latitude: lag[1], longitude: lag[0]})
						})
						var polyline = [{//指定一系列坐标点，从数组第一项连线至最后一项
									points:that.points,
									color:"#007AFF",//线的颜色
									width:9,//线的宽度
									borderColor: "#007AFF",
									dottedLine: false,
									borderWidth: true,
									arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
								}]
						that.polyline = polyline
					}
					
								
				}
				
				
				
				console.log(23,that.polyline)
			},
			
			
			markerTap(e){
				var that = this
				// id number类型 最大限制9位
				let markerId = e.detail.markerId;
				for(var i=0;i<this.stationList.length;i++){
					if(markerId == this.stationList[i]['order']){
						this.$set(this,'selectStationIndex',i)
						this.$set(this,'selectStation',this.stationList[i])
						this.addSelectMarker()
						this.getRealBus()
				
					} 
				}
			},
			getBusPos: function() {
				if (this.oneBus) {
				   return {
						latitude: this.oneBus.lat,
						longitude: this.oneBus.lng
					};
				}
				return null;
			},
			 setMapScaleByExpandLevel: function() {
				 var mapCtx = uni.createMapContext("pathDetailMap",this);
				if (this.selectStation) {
					var bus = this.getBusPos();
					var  selectStop = {
						latitude: this.selectStation.slat,
						longitude: this.selectStation.slng
					};
			
					if(bus){
						var dis = b_util.getDistanceNew({lat1: bus.latitude, lng1: bus.longitude, lat2:selectStop.latitude, lng2:selectStop.longitude});
						if(dis > 50){
							this.includePoints = this.getIncludePoints([bus,selectStop],0)
						} else {
							this.includePoints = this.getCenterPoints(selectStop,0)
						}
				
						 
					}  else {
						// mapCtx.includePoints({
						//       padding: [ 500,],
						//       points: this.getAllStation()
						//     },)
						this.includePoints = this.getAllStation()
					}
				
				}
				
				// console.log("this.includePoints",this.includePoints)
			},
			/**视野内经纬度***/
			getIncludePoints: function(t,e) {
				var i =  0,
				a = 0,
				o = 0, 
				s = 0;
				t.forEach(function(point) {
					i = !i || point.latitude > i ? Number(point.latitude) : i, 
					a = !a || point.latitude < a ? Number(point.latitude) : a, 
					o = !o || point.longitude < o ? Number(point.longitude) : o, 
					s = !s || point.longitude > s ? Number(point.longitude) : s;
				});
				var n = (0 == e ? this.drawerLayers[0] : this.drawerLayers[1]) * (this.screenWidth / 750), 
				r = this.screenWidth / (this.screenHeight - n), d = (s - o) / (i - a) > r, c = t[0].latitude > t[1].latitude;
				if (d) {
					var u = ((s - o) / r - (i - a)) / 2;
					i += u, a -= u;
				} else {
					var l = ((i - a) * r - (s - o)) / 2;
					s += l, o -= l;
				}
				var h = (0 == e ? 64 : 128) / this.screenHeight, m = {
					left: .1,
					right: .1,
					top: c ? 2 * h : h,
					bottom: h
				};
				if (d) {
					var p = (s - o) / (1 - m.left - m.right) * m.left, f = (s - o) / (1 - m.left - m.right) * m.right;
					s += f, o -= p;
					var g = (p + f) / r / 2;
					i += g, a -= g;
				} else {
					var y = (i - a) / (1 - m.top - m.bottom) * m.top, _ = (i - a) / (1 - m.top - m.bottom) * m.bottom;
					i += y, a -= _;
					var b = (y + _) * r / 2;
					s += b, o -= b;
				}
				var mapCtx = uni.createMapContext("pathDetailMap",this);
				mapCtx.includePoints({
					  padding: [ 50],
					  points: [ {
								latitude: i,
								longitude: o
							}, {
								latitude: a,
								longitude: s
							} ]
					},)
				return a = i - (i - a) / (1 - n / this.screenHeight), [ {
					latitude: i,
					longitude: o
				}, {
					latitude: a,
					longitude: s
				} ];
			},
			
			
			/**计算地图中心**/
			getCenterPoints: function(t, e) {
				var i = (0 == e ? this.drawerLayers[0] : this.drawerLayers[1]) * (this.screenWidth / 750), a = this.screenWidth, o = this.screenHeight - i, s = t.longitude - .005, n = t.longitude + .005, r = .01 * o / a, d = t.latitude + r / 2;
				var mapCtx = uni.createMapContext("pathDetailMap",this);
				mapCtx.includePoints({
					  padding: [ 50],
								  points: [ {
								latitude: d,
								longitude: s
							},
							{
								latitude: d - (d - (t.latitude - r / 2)) / (1 - i / this.screenHeight),
								longitude: n
							} ]
					},)
				
				return [ {
					latitude: d,
					longitude: s
				},
				{
					latitude: d - (d - (t.latitude - r / 2)) / (1 - i / this.screenHeight),
					longitude: n
				} ];
			},
			getAllStation: function() {
			 var data= this.stationList.map(function(t) {
					return {
						longitude: t.slng,
						latitude: t.slat
					};
				})
				mapCtx.includePoints({
					  padding: [ 50],
					  points: data
					},)
				return data;
			},	
			initMarker(){
				var that = this
				var data =[]
				
				that.stationList.forEach(function(item, i){
			       
					data.push(that.getMarkerObj(that.stationList,item, i,that))
				})
				that.stationMarkers = data
				this.$set(this,'markers',[])
				var markers =  that.markers.concat(that.stationMarkers).concat(that.carMarkers).concat(that.selectMarkers)
				this.$set(this,'markers',markers)
				
			},
			
			
			getMarkerObj(stat,item,i,that){
				var data = {}
					if(i==0){ //起點
						data = {
						   id: parseInt(item.order),　	
						   latitude:item.slat,
						   longitude: item.slng,
						   iconPath: '/static/images/bus/start_point.png',
						   width:20,
						   height:20,
						  
						   label: {
								content: item.stationName,
								color: "#1B1B1B",
								fontSize: 12,
								padding: 1,
								textAlign: "center",
								bgColor: "#ffffff",
								borderRadius:5,
								y: "IOS" === that.systemType ? 10 : 7,
								x: -(item.stationName.length % 2 == 0 ? item.stationName.length / 2 * 12 : (item.stationName.length - 1) / 2 * 12 + Math.floor(6)) - 3
					
							}
						 }
					} else if(i==stat.length-1){ //終點
						data = {
						   id: parseInt(item.order),
						   latitude:item.slat,
						   longitude: item.slng,
						   iconPath: '/static/images/bus/end_point.png',
						   width:20,
						   height:20,
						  
						   label:{
								content: item.stationName,
								color: "#1B1B1B",
								fontSize: 12,
								padding: 1,
								textAlign: "center",
								bgColor: "#ffffff",
								borderRadius:5,
								y: "IOS" === that.systemType ? 10 : 7,
								x: -(item.stationName.length % 2 == 0 ? item.stationName.length / 2 * 12 : (item.stationName.length - 1) / 2 * 12 + Math.floor(6)) - 3
							}
					 }
					}else{
						data = {
						   id: parseInt(item.order),
						   latitude:item.slat,
						   longitude: item.slng,
						   iconPath: '/static/images/bus/bus-staion-bule.png',
						   width:15,
						   height:15,
						
						   label:that.scale>=15?{
							content:item.stationName,
							color: "#1B1B1B",
							fontSize: 12,
							padding: 5,
							textAlign: "center",
							bgColor: "#ffffff",
							borderRadius:5,
							y: "IOS" === that.systemType ? 10 : 7,
							x: -(item.stationName.length % 2 == 0 ? item.stationName.length / 2 * 12 : (item.stationName.length - 1) / 2 * 12 + Math.floor(6)) - 3
						  }:''
						}
					}
				
				return data
			},
			
		addSelectMarker(){
			var that = this
			// 删除以前的SelectMarker
				
			
			
			// that.selectMarkers = []
			var data =[]
			data.push(that.getStationMarkerObj(that.selectStation))
			that.selectMarkers = data
			this.$set(this,'markers',[])
			var markers =  that.markers.concat(that.stationMarkers).concat(that.carMarkers).concat(that.selectMarkers)
			
		    this.$set(this,'markers',markers)
			
		},
		getStationMarkerObj(item){
			var data = {}
			var that = this
			data = {
			   id: parseInt('6666'+item.order),
			   latitude:item.slat,
			   longitude: item.slng,
			   iconPath: '/static/images/bus/ic-bus-stop-select.png',
			   width: 32,
			   height: 37,
			   label: that.scale<15?{
					content: item.stationName,
					color: "#1B1B1B",
					fontSize: 12,
					padding: 1,
					textAlign: "center",
					bgColor: "#ffffff",
					borderRadius:5,
					y: "IOS" === that.systemType ? 10 : 7,
					x: -(item.stationName.length % 2 == 0 ? item.stationName.length / 2 * 12 : (item.stationName.length - 1) / 2 * 12 + Math.floor(6)) - 3
				}:''
			}	
			
			return data
		},
				
		
		initCarMarker(){
			var that = this
			// that.carMarkers = []
		
			var data =[]
				
			// if(that.carMarkers&&that.carMarkers.length){
			// 	that.markers.forEach((el, index) => {
			// 		that.carMarkers.forEach(function(item, busIndex){
			// 			if(parseInt(el.id) == parseInt(item.id)){
			// 				that.markers.splice(index,1)
			// 			}
			// 		})
			// 	})
			// }
			that.livebus.buses.forEach(function(item, index){
			
				data.push(that.getCarMarkerObj(item, index))
			})
			
			
			that.carMarkers = data
			this.$set(this,'markers',[])
			
			var markers =  that.markers.concat(that.stationMarkers).concat(that.carMarkers).concat(that.selectMarkers)
			
			
			
			// this.$refs.pathDetailMap.setMarkers(markers)
			 this.$set(this,'markers',markers)
			
		},
		getCarMarkerObj(item,i){
			var data = {}
			var that = this
			if(this.oneBus.busId == item.busId){
				var text = item.text == '已到站' || item.text == '即将到站' ? item.text: '还有'+item.text+'，'+item.distance.value+item.distance.unit+'后抵达'
				data = {
				   id: parseInt(item.busId),
				   latitude:item.lat,
				   longitude: item.lng,
				   iconPath: '/static/images/bus/bus_icon7.png',
				   width: 42,
				   height: 68,
				   anchor: {
					  x: .5,
					  y: .5
				   },
				   rotate:item.rotate,
				   label: {
						content: text,
						color: "#1B1B1B",
						fontSize: 12,
						padding: 1,
						textAlign: "center",
						bgColor: "#ffffff",
						borderRadius:5,
						y: "IOS" === that.systemType ? 10 : 7,
						x: -(text.length % 2 == 0 ? text / 2 * 12 : (text - 1) / 2 * 12 + Math.floor(6)) - 3
			
					}
				   // callout: {
					  //  content: text,
					  //  bgColor: "#000000aa",
					  //  fontSize: 14,
					  //  color: "#ffffff",
					  //  borderRadius: 3,
					  //  display: "ALWAYS",
					  //  textAlign: "center",
					  //  padding: 10
				   // }
				}	
			} else {
				data = {
				   id: parseInt(item.busId),
				   latitude:item.lat,
				   longitude: item.lng,
				   iconPath: '/static/images/bus/bus_icon7.png',
				   width: 42,
				   height: 68,
				   anchor: {
					  x: .5,
					  y: .5
				   },
				    rotate:item.rotate,
		
				}	
			}
			
			
			return data
		},
			 
		
		     changeStation(index){
		     	var that = this
		     	this.$set(this,'selectStationIndex',index)
		     	this.$set(this,'selectStation',this.stationList[index])
		     
		     	 this.getRealBus()
		     	setTimeout(function(){
		     		that.watchStationName();
		     		that.$set(that,'leftShow', 0)
		     		that.$set(that,'rightShow', 0)
		     	},100)
		     	this.setScrollLeft(index)
				
	
		     	
		     },
			
			 
			 setScrollLeft: function(index) {
			 	var that = this, 
			 	screenWidth = that.screenWidth,
			 	s = .168 * screenWidth * index - screenWidth / 2;
				this.scrollLeft = s-1
				// console.log('scrollLeft',s)
			 	setTimeout(function() {
			 		that.$set(that,'scrollLeft', s);
					that.$set(that,'leftShow', 0)
					that.$set(that,'rightShow', 0)
			 	}, 20);
			 },
			 watchStationName: function () {
			   var that = this;
			   that.observe && that.observe.disconnect();
			   that.observe = this.createIntersectionObserver({
			     thresholds: [1],
			     initialRatio: 1
			   });
			   that.observe.relativeTo(".scroll_view", {
			     left: 0,
			     right: 35,
			     bottom: 200
			   }).observe(".station_name.active",(i) => {
			 	 var systemInfo =  uni.getSystemInfoSync()
			       var s = systemInfo.windowWidth / 2;
			 	 
			 		  if(i.intersectionRatio < 1){
						 
			 			  if(i.boundingClientRect.left < 0){
			 				  that.$set(that,'leftShow', 1)
			 			  }
			 			  if(i.boundingClientRect.left > s){
			 				  that.$set(that,'rightShow', 1)
			 			  }
			 		
			 		  } else {
			 			  if(i.boundingClientRect.left >= 0 && i.boundingClientRect.left < s){
			 				   that.$set(that,'leftShow',0)
			 			  }
			 			
			 			  if(i.boundingClientRect.left >= s ){
			 			  	   that.$set(that,'rightShow',0)
			 			  }
			 			
			 		  }
			 	
			   });
			 },
		
		
			setRealtimeBus() {
			   var that = this;
			   that.getRealBus();
			   /** 定位到当前站点 **/
			   clearInterval(that.setInterName)
			   that.setInterName = setInterval(() => {
				   setTimeout(() => {
					   that.getRealBus();
				   }, 0)
			   }, 15000)
		    },
			// 排序函数
			 objArraySort(objArr, key) {
				let result = objArr.slice(0);
				return result.sort((a, b) => a[key] - b[key]);
			},


			// 传入不同的站点
		    getRealBus() {
				var that = this;
				var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
				getRealBusApi({
					lineId: that.lineId,
					targetOrder: that.selectStationIndex+1,
					cityId: city.id
				}).then(res => {
					var lineData = b_util.parseRealtimeBusLineStation(res.data, (that.selectStationIndex+1))
					
				
					that.$set(that,'livebus', lineData)
					
					that.$set(that,'roads', res.data.roads)
					// console.log('车辆个数==',that.livebus.buses.length)
					// console.log('车辆',that.livebus.buses)
					// console.log('data=====',data)
					that.initPolyLine()
					if(that.livebus.buses.length>0){
						setTimeout(function(){
							that.initBuses()
						},100)
					}
					setTimeout(function(){
						that.setMapScaleByExpandLevel();
					},150)
					if(that.roads.length>0){
						that.initTraffic()
					}
					
				})

		    },
			
			
			initBuses(){
				var that = this
				var busList = []
				var carDatas = []
				var temCarData = []
				that.livebus.buses.forEach((el, index) => {
					var lag = wgs84togcj02(el.lng, el.lat)
					that.livebus.buses[index].lng = lag[0]
					that.livebus.buses[index].lat = lag[1]
					if((that.selectStationIndex+1) - el.order >=0){
						busList.push({
						 	key: (that.selectStationIndex+1) - el.order,
							value: el
						})
					}
					
					var res3 =  that.points.reduce((res, item, index) => {
								
					  const sum = b_util.getDistanceNew({lat1: item.latitude,lng1: item.longitude,lat2: lag[1],lng2:lag[0]})
					  if (sum < res[0] || index == 0) {
					    res = [sum, index];
					  }
					  return res
					}, [0, 0]);
					
					// 如果是终点
					if(res3[1]+1 == that.points.length-1){
						var rotate =  b_util.calRotate(that.points[res3[1]-1].latitude,that.points[res3[1]-1].longitude,that.points[res3[1]].latitude,that.points[res3[1]].longitude)
						that.livebus.buses[index].rotate = rotate
					} else {
						var rotate =  b_util.calRotate(that.points[res3[1]].latitude,that.points[res3[1]].longitude,that.points[res3[1]+1].latitude,that.points[res3[1]+1].longitude)
						that.livebus.buses[index].rotate = rotate
					}
					
				})
				var carDatas = that.livebus.buses.reduce((acc, item) => {
				  // if (!acc[item.order]) {
				  //   acc[item.order+'-'+item.text] = [];
				  // }
				  
				  // acc[item.order+'-'+item.text].push(item);
				  if (!acc[item.order + '' + item.toNextStatus ]) {
				    acc[item.order + '' + item.toNextStatus] = [];
				  }
				  
				  acc[item.order + '' + item.toNextStatus].push(item);
				  return acc;
				}, []);
				
				
				
				
				for(let key in carDatas){
				    if(carDatas.hasOwnProperty(key)){
						temCarData.push(carDatas[key])
				    }
				}
				that.$set(that,'lineBusList', temCarData)
				that.$set(that,'oneBus', '')
				that.$set(that,'twoBus', '')
				 // console.log('busList1',busList)
				busList = this.objArraySort(busList, "key")
				 // console.log('busList2',busList)
				 
				 if(busList.length >=2){
					 if(busList[0].value.distanceToWaitStn <= busList[1].value.distanceToWaitStn){
						 that.$set(that,'oneBus', busList[0].value)
						 that.$set(that,'twoBus', busList[1].value)
					 } else {
						 that.$set(that,'oneBus', busList[1].value)
						 that.$set(that,'twoBus', busList[0].value)
					 }
					
				 } else if(busList.length == 1)  {
					 that.$set(that,'oneBus', busList[0].value)
				 }
				// busList.forEach((el, index) => {
					
				// 	if(index == 0){
				// 		that.$set(that,'oneBus', busList[index].value)
				// 	} else if(index == 1){
				// 		that.$set(that,'twoBus', busList[index].value)
				// 	}
				// })
				setTimeout(function(){
					that.initCarMarker()
				},300)
			},
		
		
		    initTraffic(){
				var that = this
				that.stationList.forEach((el ,index) =>{
					if(index < that.stationList.length-1){
						that.stationList[index]['traffic'] = that.roads[index]?that.roads[index][0]['TVL']: 0
					}
					
				})
			},
		
			// 获取附近站点
			getNearestStopFun: function () {
			  var that = this;
			  
			  uni.getLocation({
			    type: "gcj02",
			    success: function (e) {
			      var stations = that.stationList,
			        lng1 = e.longitude,
			        lat1 = e.latitude,
			        disList = [];
					if(stations && stations.length){						
						stations.forEach(function(t){
							 disList.push(b_util.getDistanceNew({lat1: lat1,lng1: lng1,lat2: t.slat,lng2: t.slng}))
						})
					}
					if(disList.length){
						var mins = Math.min.apply(Math, disList),
						  minItem = disList.indexOf(mins);
						  
						  if(minItem > -1) {
							  that.nearestStation = stations[minItem]
						  }
						  
					}
					
					that.initStation()
			     
			    },
				fail() {
					that.initStation()
				}
			  });
			},
			
			
			   // 换向
		    exchange() {
			   if (this.oppositeList.length) {
				   this.lineId = this.oppositeList[0].lineId;
				
				   this.getLineInfo();
			   } else{
				   return this.$util.Tips({
					   title: '此线路为单向线路'
				   })
			   }
			   
		    },
			
			
			collect() {
				var that = this
				if (this.isLogin == false) {
					toLogin()
				} else {
					var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
					let data = {
						lineId: this.lineId,
						type: 2,
						cityId:  city?city.id:1,
						ctype: 'collect',
						opr: 1,
						stationId: this.selectStation.stationId
					}
					collectLine(data).then(res => {
						that.isCollect = 1
						return that.$util.Tips({
							title: '收藏成功'
						}); 
					}).catch((err) =>{
						console.log('err===',err)
						return that.$util.Tips({
							title: err
						}); 
					});
				}
				
			},
			cancelCollect() {
				var that = this
				if (this.isLogin == false) {
					toLogin()
				} else {
					
					uni.showModal({
					    // title: '取消收藏线路',
					    content: '确认取消收藏？',
						cancelText: '点错了',
					    success: function (res) {
					        if (res.confirm) {
								var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : "";
								let data = {
									lineId: that.lineId,
									type: 2,
									cityId:  city?city.id:1,
									ctype: 'collect',
									opr: 0,
									stationId: that.selectStation.stationId
								}
								collectLine(data).then(res => {
									that.isCollect = 0
									return that.$util.Tips({
										title: '取消收藏成功'
									}); 
								}).catch((err) =>{
									console.log('err===',err)
									return that.$util.Tips({
										title: err
									}); 
								});
					        } else if (res.cancel) {
					            // console.log('用户点击取消');
					        }
					    }
					});
					
					
				}
				
				
			},
			isCollectLine() {
				var that = this
				var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
				isCollectLine({
					lineId: that.lineId,
					ctype: 'collect',
					type: 2,
					opr: 3,
					cityId: city?city.id:1
				}).then(res => {
					that.isCollect = res.data
					
					if(that.isCollect == false && that.isLogin && !Cache.has(COLLECT_MODEL) &&that.selectStation.stationId &&that.lineId&&that.lineInfo){
						setTimeout(function(){
							uni.showModal({
							    // title: '取消收藏线路',
							    content: '是否将'+ that.lineInfo.lineName+'添加到我的收藏？',
								cancelText: '下次再说',
								confirmText: '确认添加',
							    success: function (res) {
									Cache.set(COLLECT_MODEL,true,86400)
									  if (res.confirm) {
										  that.collect()
									  }
							        
							    }
							});
						},5000)
					}
				})
			},
			
			addBrLine(){
				Routine.getAliCode().then(code => {
					// uni.hideLoading();
					
					var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
					let data = {
						lineId: this.lineId,
						cityId:  city?city.id:1,
						code: code,
						stationId: this.selectStation.stationId
					}
					addBrowsedLine(data).then(res => {
						
					}).catch((err) =>{
						console.log('err===',err)
				
					});
					
				}).catch(e => {
					console.log('e',e)
					// uni.hideLoading();
					uni.showToast({
						title: '登录失败',
						duration: 2000
					});
				})
			},
		
			
			refreshHandel(){
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: "linear",
					transformOrigin: "50% 50% 0"
				})
				animation.rotateZ(360 * (this.ExAnimationNum)).step()
				// 导出动画数据传递给data层
				this.animationData = animation.export()
				this.ExAnimationNum++
				
				this.getRealBus()
				
				setTimeout(function(){
					return that.$util.Tips({
						title: '刷新成功'
					})
					uni.stopPullDownRefresh();
				},1000)

			},
			goSameStation(){
				uni.navigateTo({
					url: `/pages/real_bus/station_list?stationName=${this.selectStation.stationName}`
				})
			},
			goMap(){
				uni.navigateTo({
					url: `/pages/real_bus/line_map?stationId=${this.selectStation.stationId}&lineId=${this.lineId}`,
				})
			},
			goBackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			gofeedback(){
				uni.navigateTo({
					url:"/pages/users/feedback/index?type=0"+'&lineName='+this.lineInfo.lineName+'&stationName='+this.selectStation.stationName
				})
			},
			goHere: function(item) {
				uni.openLocation({
					latitude: parseFloat(item.slat),
					longitude: parseFloat(item.slng),
					name: item.stationName,
					geocode: true,
					success: function(res) {
						console.log(res)
					},
				});
			},
			getBusAd(){
					var that = this
					getBusAd().then( res => {
						that.adData = res.data
					})
				},
			onload(e) {
			  console.log('广告数据加载成功1111',e);
					
			  // setTimeout(res => {
				  this.$refs.adinterstitial.show()
			  // },3500)
			},
			goselfApp(){
				uni.navigateTo({
					url: this.adData.path,
				})
			},
			goApp(item){
				// #ifdef MP-WEIXIN
				 uni.openEmbeddedMiniProgram({
					appId: this.adData.appid, 
					path: this.adData.url,
					extraData: {
					},
					success(res) {
					 // 打开成功
					}
				 })
				 // #endif
				 // #ifdef APP-PLUS
				   //需调用plus.share.getServices获取微信分享服务对象    
				  plus.share.getServices((s) => {    
					  let sweixin = {};    
					  for (let i = 0; i < s.length; i++) {    
						  let share = s[i];    
						  if (share.id === 'weixin') {    
							  sweixin = share    
						  }    
					  }    
					  //小程序参数，必填    
					  let WeixinMiniProgramOptions = {    
						  id: this.adData.g_id,    
						  path: this.adData.url,//可指定打开的页面    
					  }    
					  sweixin ? sweixin.launchMiniProgram(WeixinMiniProgramOptions) : plus.nativeUI.alert(    
						  '当前环境不支持微信操作!');    
				  }, function(e) {    
					  console.log("获取分享服务列表失败：" + e.message);    
				  });  
				  // #endif
			},
					 
	    }
	}
</script>

<style>
.container {
    background: #fff;
    overflow: hidden;
	min-height: 100%;
	color: #888;
	height: 100vh;
}

.container,.map {
    width: 100%;
    height: 100%;

}
	
.layer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 88;
}

.layer,.min-layer {
    width: 100%;
   display: flex;
}

.min-layer {
    height: 100%;
    background: #fff;
    box-shadow: 0 -10rpx 20rpx 0 rgba(0,0,0,.09);
    border-radius: 20rpx 20rpx 0 0;
    flex-direction: column;
    align-items: center;
}
.top-panel {
    width: 100%;
}
.flex-h-vcenter {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex-v {
	display: flex;
    flex-direction: column;
}
.v-location {
    width: 80rpx;
    height: 80rpx;
    margin-right: 30rpx;
    margin-bottom: 24rpx;
}
.footer{
	width: 100%;
	position: fixed;
	left: 0rpx;
	right: 0rpx;
	bottom: 0rpx;
	z-index: 1000;
}
.wrap-footer{
	display: flex;
	height: 140rpx;
	background: #fefefe;
	box-shadow: inset 0 1px 0 0 rgba(211,211,216,.5);
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}


	
	
	.collect{
		font-size: 15px;
		margin-left: 2px;
		color: #000;
	}
	.arrup-main{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 7px 0 4px;
	}
	
	.map-contarin {
	    /* top: 0; */
		width: 100%;
		height: 100%;
		/* position: absolute; */
	}
	
	.map-content {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    min-height: 240rpx;
		height: 220px;
	}
	


	.layer-title {
	    flex-shrink: 0;
	}
	
	.layer-title {
	    width: 670rpx;
	    display: flex;
	    margin-top: 10rpx;
	    align-items: center;
	}
	
	.img-attention {
	    width: 36rpx;
	    height: 36rpx;
	}
	
	.img-attention,.img-unattention {
	    margin-right: 12rpx;
	    flex-shrink: 0;
	}
	
	.img-unattention {
	    width: 34rpx;
	    height: 30rpx;
	}
	
	.tx-title-ellipsis {
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}
	
	.tx-title-big {
	    font-family: DINAlternate-Bold;
	    font-size: 48rpx;
	    font-weight: 700;
	    color: #3a3a48;
	}
	
	.tx-title-small {
	    font-family: PingFangSC-Semibold;
	    font-size: 36rpx;
	    font-weight: 700;
	    color: #3a3a48;
	}

	
	.layer-stop {
	    height: 36rpx;
	    line-height: 36rpx;
		margin-top: 15px;
	}
	
	.layer-stop,.layer-time-price {
	    width: 670rpx;
	    display: flex;
	    align-items: center;
	    flex-shrink: 0;
	}
	
	.layer-time-price {
	    height: 24rpx;
	    line-height: 24rpx;
	    margin-top: 18rpx;
	}
	
	.stop-name {
	    font-family: PingFangSC-Medium;
	    font-size: 28rpx;
	    font-weight: 700;
	    color: #3a3a48;
	    letter-spacing: 0;
	    max-width: 600rpx;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    white-space: nowrap;
	}
	
	.to-right {
	    width: 23rpx;
	    height: 9rpx;
	    margin-left: 10rpx;
	    margin-right: 10rpx;
	}
	
	.to-change {
		/* #ifdef MP || APP-PLUS || H5 */
	    width: 80rpx;
	    height: 25rpx;
		padding: 17rpx 10rpx 11rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		width: 80rpx;
		height: 25rpx;
		/* #endif */
	   
	}
	
	.bus {
	    width: 670rpx;
	    height: 170rpx;
	    background: #fff;
	    box-shadow: 0 20rpx 60rpx 0 rgba(222,223,224,.65);
	    border-radius: 16rpx;
	    position: relative;
	    overflow: hidden!important;
	    flex-shrink: 0;
	    z-index: 999;
		margin-top: 15px;
	}
	
	.near-title {
	    width: 670rpx;
	    font-family: PingFangSC-Semibold;
	    font-size: 32rpx;
	    color: #242b34;
	    margin-top: 30rpx;
	}
	
	.ico-site {
	    width: 36rpx;
	    height: 36rpx;
	}
	
	.near-title {
	    height: 36rpx;
	    margin-top: 36rpx;
	    margin-left: 36rpx;
	    display: flex;
	    align-items: center;
	}
	
	.near-site-name {
	    font-family: PingFangSC-Semibold;
	    font-size: 36rpx;
	    font-weight: 700;
	    color: #3a3a48;
	    line-height: 36rpx;
	    margin-left: 26rpx;
	    margin-right: 16rpx;
	}
	
	.near-site-distance {
	    font-family: DINAlternate-Bold;
	    font-size: 32rpx;
	    color: #babac3;
	    letter-spacing: 0;
	    line-height: 24rpx;
	}
	
	.bus-eta {
	    display: flex;
	    margin-left: 36rpx;
	    margin-top: 40rpx;
	}
	
	
	
	.tpl-loading0 {
	    opacity: .5;
	}
	
	.tpl-loading0,.tpl-loading1 {
	    width: 240rpx;
	    height: 36rpx;
	    background: #d8d8d8;
	    border-radius: 6px;
	}
	
	.tpl-loading1 {
	    opacity: .2;
	    margin-left: 30rpx;
	}
	
	
	.break {
	    color: #ffb481;
	}
	
	.font-size-26 {
	    font-size: 26rpx!important;
	}
	
	.font-size-32 {
	    font-size: 32rpx!important;
	}
	
	.near-bus-state {
	    font-family: PingFangSC-Medium;
	    color: #37d095;
	    text-align: center;
	}
	
	.near-bus-eta,.near-bus-state {
	    font-size: 36rpx;
	    font-weight: 700;
	    line-height: 40rpx;
	    margin-top: 19rpx;
	}
	
	.near-bus-eta,.near-bus-time {
	    opacity: .3;
	    font-family: PingFangSC-Semibold;
	    color: #242b34;
	}
	
	.near-bus-time {
	    line-height: 36rpx;
	    font-size: 26rpx;
	    margin-top: 19rpx;
	    margin-left: 30rpx;
	    display: flex;
	    align-items: center;
	}
	
	.v-location {
	    width: 80rpx;
	    height: 80rpx;
	    margin-right: 30rpx;
	    margin-bottom: 24rpx;
	}
	
	.iconfont-arrow-left {
	    position: absolute;
	    width: 100rpx;
	    padding: 30rpx 0 0 40rpx;
	    left: 0;
	    bottom: 8px;
	}
	
	.iconfont-arrow-left:before {
	    content: "\e80a";
	    font-family: iconfont;
	    font-style: normal;
	    font-weight: 400;
	    display: inline-block;
	    text-decoration: inherit;
	    text-align: center;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	    font-size: 36rpx;
	    vertical-align: middle;
	}
	
	

	
	

	
	.ico-first {
	    font-family: PingFangSC-Medium;
	    font-size: 24rpx;
	}
	
	.header-time,.ico-first {
	    color: #babac3;
	    line-height: 24rpx;
	}
	
	.header-time {
	/*    font-family: DINAlternate-Bold;
	    font-size: 28rpx; */
	}
	
	.line-track {
	    z-index: 1000;
	    flex-grow: 1;
	    /* margin-bottom: 220rpx; */
	    overflow: hidden;
		margin-top: 40rpx;
	}
	
	.press {
	    opacity: .75;
	}
	
	.top-panel {
	    width: 100%;
	}
	
	.feedback-container {
	    height: 90rpx;
	    margin: 0 14rpx 30rpx;
	    background: #fff;
	    box-shadow: 0 10px 40px 0 rgba(0,0,0,.2);
	    border-radius: 16rpx;
	    display: flex;
	    width: 722rpx;
	    justify-content: center;
	    align-items: center;
	}
	
	.feedback-txt {
	    font-family: PingFangSC-Medium;
	    font-size: 28rpx;
	    color: #000;
	    flex-grow: 1;
	    margin-left: 24rpx;
	}
	
	.feedback-select-close {
	    width: 20rpx;
	    height: 20rpx;
	    padding: 20rpx;
	}
	
	.feedback-select-txt {
	    font-family: PingFangSC-Medium;
	    font-size: 28rpx;
	    color: #242b34;
	    position: absolute;
	    line-height: 72rpx;
	    height: 72rpx;
	    text-align: center;
	    right: 21rpx;
	}
	
	.selected-txt {
	    color: #2bd4a7!important;
	}
	
	.feedback-select-ico {
	    width: 145rpx;
	    height: 72rpx;
	}
	
	.feedback-btn {
	    position: relative;
	    display: flex;
	}
	
	.feedback-right-btn {
	    margin-left: 16rpx;
	}
	
	.bus-time {
	    /* width: 670rpx; */
	    height: 30rpx;
	    position: relative;
	    margin-top: 20rpx;
	}
	
	.bus-time-bg {
	    opacity: .6;
	    border-radius: 6rpx;
	    background-color: #e3fbf4;
	}
	
	.bus-time-bg,.bus-time-v {
	    width: 183rpx;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	
	.bus-time-v {
	    display: flex;
	    align-items: center;
	}
	
	.bus-time-img {
	    width: 22rpx;
	    height: 23rpx;
	    margin-left: 19rpx;
	}
	
	.bus-time-tx {
	    font-family: PingFangSC-Medium;
	    font-size: 24rpx;
	    color: #2bd4a7;
	    line-height: 24rpx;
	    margin-left: 6rpx;
	}
	
	.item-bus-time {
	    font-family: PingFangSC-Regular;
	    font-size: 30rpx;
	    color: #9b9ba1;
	    line-height: 55rpx;
	}
	
	.near-bus-noeta {
	    opacity: .3;
	    font-family: PingFangSC-Semibold;
	    font-size: 26rpx;
	    color: #242b34;
	}
	
	.near-bus-noeta,.near-bus-state-noeta {
	    font-weight: 700;
	    line-height: 36rpx;
	    margin-top: 21rpx;
	}
	
	.near-bus-state-noeta {
	    font-family: PingFangSC-Medium;
	    font-size: 32rpx;
	    color: #3a3a48;
	    text-align: center;
	}
	
	.scroll_view .line_wrapper {
	    display: flex;
	    flex: 1;
	    margin-left: 64rpx;
	    margin-top: 56rpx;
	}
	
	.scroll_view .line_wrapper .line_s {
	    width: 126rpx;
	}
	
	.scroll_view .line_wrapper .line_s .station-arrive-time {
	    color: #666;
	    font-size: 24rpx;
	    line-height: 34rpx;
	    margin-top: 20rpx;
	    text-align: center;
	    transform: translateX(-50%);
	}
	
	.scroll_view .line_wrapper .line_s .bar {
	    position: relative;
	    width: 126rpx;
	}
	
	.scroll_view .line_wrapper .line_s .bar .bar_line {
	    background-color: #00ae77;
	    height: 16rpx;
	    position: relative;
	    width: 126rpx;
	}
	
	.scroll_view .line_wrapper .line_s .bar .bar_line .bar_arrow {
	    height: 16rpx;
	    left: 50%;
	    position: absolute;
	    transform: translateX(-50%);
	    width: 14rpx;
	}
	
	.line_wrapper .line_s .bar .station {
	    align-items: flex-start;
	    display: flex;
	    margin-top: 16rpx;
	}
	
	.line_wrapper .line_s .bar .station .station_name {
		margin-top: 5px;
	    color: #222;
	    font-size: 28rpx;
	    line-height: 36rpx;
	    min-height: 500rpx;
	    padding: 0 20rpx;
	    text-align: center;
	    transform: translateX(-35rpx);
	    /* width: 30rpx; */
		 width: 80rpx; 
	    word-break: break-word;
	}
	
	.line_wrapper .line_s .bar .station .nearest-text {
	    border-radius: 4rpx;
	    color: #00aa00;
	    font-size: 18rpx;
	    line-height: 20rpx;
	    margin-top: 8rpx;
	    padding: 4rpx 0;
	    text-align: center;
	    margin-left: -50rpx;
	    width: 26rpx;
	}
	.metro-text {
	    border-radius: 4rpx;
	    color: #FFFFFF;
	    font-size: 18rpx;
	    line-height: 20rpx;
	    margin-top: 8rpx;
	    padding: 4rpx 2rpx;
	    text-align: center;
	    margin-left: -50rpx;
	    width: 26rpx;
	}
	
	.bar .station .station_name .no {
	    color: grey;
	    font-size: 24rpx;
	}
	
	.scroll_view .line_wrapper .line_s .bar .bar_line.end {
	    background: #b0cdff;
	    border-radius: 22rpx;
	    height: 11rpx;
	    position: relative;
	    width: 0rpx;
	}
	
	.line_wrapper .line_s .bar .station .station_name.active,.line_wrapper .line_s .bar .station .station_name.active .no {
	    color: #006DE7;
	    font-size: 30rpx;
	    font-weight: 700;
	}
	
	.line_wrapper .line_s .bar .station .station_name.active .off {
	    color: #ff5c32;
	}
	
	.bar .station .station_name .icon {
	    height: 40rpx;
	    margin-left: -5rpx;
	    margin-top: 12rpx;
	    width: 40rpx;
	}
	
	.bar .station .station_name .icon.icon-pos-nav {
	    height: 42rpx;
	    margin-top: 15rpx;
	    transform: translateX(-6rpx);
	    width: 42rpx;
	}
	
	.bus.hide {
	    display: none;
	}
	
	.bus.active {
	    display: block;
	}
	
	.line_stop_pos {
	    height: 36rpx;
	    left: -18rpx;
	    position: absolute;
	    top: -10rpx;
	    width: 36rpx;
	}
	
	.line_stop_pos.selected {
	    height: 48rpx;
	    left: -24rpx;
	    top: -16rpx;
	    width: 48rpx;
	}
	
	.hover_station {
	    background-color: #fff;
	    border-radius: 4rpx;
	    box-shadow: 0 4rpx 20rpx 2rpx rgba(0,0,0,.13);
	    box-sizing: border-box;
	    color: #006DE7;
	    display: flex;
	    flex-direction: column;
	    font-size: 30rpx;
	    font-weight: 700;
	    /* height: 280rpx; */
	    line-height: 36rpx;
	    overflow: hidden;
	    padding: 16rpx 10rpx;
	    position: fixed;
	    text-align: center;
	    width: 64rpx;
	    word-break: break-word;
	    z-index: 99;
	}
	
	.hover_station.left {
	    left: 8rpx;
	}
	
	.hover_station.right {
	    right: 8rpx;
	}
	
	.hover_station .icon-arrow-c {
	    flex: 0 0 44rpx;
	    margin-bottom: 10rpx;
	    width: 44rpx;
	}
	
	.hover_station .name {
	    flex: 1;
	    overflow: hidden;
	}
	
	.hover_station .off {
	    color: #ff5c32;
	}
	
	.bus-one {

	    margin-top: 16rpx;
	    display: flex;
		flex-direction: column;
	    color: #006DE7;
		align-items: center;
	}
	
	.bus-one-hover {
	    color: #fff;
	}
	.tx-trave{
		height: 56rpx;
		line-height: 56rpx;
		font-family: DINAlternate-Bold;
		font-weight: 600;
		font-size: 56rpx;
	}
	.txorcolor{
		color: #ff5c32;
	}
	.tx-sem {
	    height: 48rpx;
	    line-height: 48rpx;
	    font-family: DINAlternate-Bold;
	    font-weight: 700;
	    font-size: 30rpx;
	}
	
	.tx-ydz {
	    height: 48rpx;
	    line-height: 48rpx;
	    font-family: DINAlternate-Bold;
	    font-weight: 700;
	    font-size: 48rpx;
		color: #ff5c32;
		margin-top: 10px;
	}
	.tx-fz {
		font-size: 24rpx;
	}
	.tx-fz-or {
		font-size: 24rpx;
		color: #ff5c32;
	}
	
	.tx-sem {
	    height: 32rpx;
	    line-height: 32rpx;
	    /* font-family: PingFangSC-Semibold; */
	    font-weight: 700;
	    font-size: 32rpx;
	    margin-left: 4rpx;
	    margin-top: 12rpx;
	}
	
	.tx-sem2 {
	    width: 6rpx;
	    height: 6rpx;
	    background-color: #006DE7;
	    margin: 20rpx 8rpx;
	}
	.tx-sem-or {
	    width: 6rpx;
	    height: 6rpx;
	    background-color: #ff5c32;
	    margin: 20rpx 8rpx;
	}
	
	.tx-sem2-hover {
	    background-color: #fff;
	}
	.bus-item {
	    position: absolute;
	    top: 0;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	
   .bus-item-num {
	    position: absolute;
		color: #ffffff;
		background-color: #006DE7;
		border-radius: 50%;
		font-size: 10px;
		left: 25px;
		/* top: -5px;; */
		width: 10px;
		height: 10px;
		text-align: center;
		line-height: 10px;
	}
	
	.bus-item .bus-item-image {
	    width: 60rpx;
	    height: 33rpx;
	    margin-top: 4rpx;
	}
	.bus-block {
	    /* position: absolute;
	    top: 5px; */
		    position: relative;
		    top: -15px;
	}
	.bus-block .bus_icon {
	   width: 60rpx;
	   /* height: 33rpx; */
	}
	
	.bus-block.center .bus_icon,.bus.left .bus_icon {
	    transform: translateX(-50%);
	}
	
	.bus-block.center .bus_icon {
	    left: 50%;
	    position: absolute;
	}
	
	.bus_icon .icon-bus {
	    display: block;
	   width: 60rpx;
	   height: 33rpx;
	}
	
	.traffic-level3223 {
	  background-color: #ea605d !important;
	}
	
	.traffic-level-1 {
	  background-color: #00ae77 !important;
	}
	.traffic-level-2 {
	  background-color: #ffaa53 !important;
	}
	.traffic-level-3 {
	  background-color: #ea605d !important;
	}
	.traffic-level-4 {
	  background-color: #9a2d21 !important;
	}
	.back-last-page {
		width: 72rpx;
		height: 72rpx;
		position: fixed;
		left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999999;
		background-color: #fff;
		box-shadow: 0 0 10rpx 0 rgba(0,0,0,.14);
		border-radius: 50%;
	}
	.image-back{
		height: 44rpx;
		width: 44rpx;
	}
	.icon-foot{
		font-size: 15px !important;
		/* margin-bottom: 8px; */
		color: #949494  !important;
	}
	.icon-foot-active{
		color: #ff5500!important;
	}
	
	.ad-box{
		height: 120px;
		overflow-y: hidden;
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		z-index: 999999;
	}
	.diy-ad{
		width: 100%;
		height: 100px;
	}
	.diy-ad image{
		width: 90%;
		height: 100%;
		border-radius: 10px;
		
	}
	.attention-container {
	    position: absolute;
	    right: 30rpx;
	    top: 15rpx;
	    height: 40rpx;
	    display: flex;
	    justify-content: left;
		align-content: center;
	}
	
	.attention-icon-container {
	   height: 40rpx;
	   line-height: 40rpx;
	}
	
	.attention-icon {
	    height: 40rpx;
	    width: 40rpx;
	}
	
	.attention-icon-default {
	}
	
	.attentiion-icon-active {
	}
	
	.attention-text {
	    margin-left: 8rpx;
	    font-family: PingFangSC-Regular;
	    font-size: 26rpx;
	    height: 40rpx;
	    line-height: 40rpx;
	    color: #999;
	    letter-spacing: 0;
	    text-align: center;
	}
	.feeditem{
		width: 80rpx;
		height: 80rpx;
		margin-right: 30rpx;
		margin-bottom: 24rpx;
		background: #FFF;
		border-radius: 8px;
	}
	
	.footer-box{
		/* width: 610rpx; */
		margin: 0rpx 15px;
		padding: 15rpx 0rpx;
		background-color: #FFFFFF;
		/* border: 1rpx solid #1296DB; */
		border-radius: 25px;
		/* position: fixed; */
		left: 0rpx;
		right: 0rpx;
		z-index: 20;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	.footer-btn-list{
		flex: 1;
		text-align: center;
		color: #636363;
		
	}
	.icon-shoucang1{
		color: #ff5c32 !important;
	}
	.icontubiao{
		font-size: 18px;
	}
	.icontextfont{
		font-size: 12px;
	}
	.ditu{
		position: absolute;
		height: 60px;
		width: 60px;
		background: #007AFF;
		border-radius: 50%;
		top: 0;
	}
	
</style>
